<template>
  <div class="container">
    <a-modal
      v-model:visible="visible"
      :width="1200"
      draggable
      :footer="false"
      @close="resetFields"
    >
      <template #title> 加密/解密 设备 </template>
      <a-form ref="formRef" layout="vertical" :model="formData">
        <a-space direction="vertical" :size="16">
          <a-card class="general-card">
            <template #title> </template>
            <a-row :gutter="80">
              <a-col :span="8">
                <a-form-item
                    label="操作"
                    field="action"
                    required
                >
                  <a-select
                      v-model="formData.action"
                      placeholder="请选择"
                      allow-clear
                  >
                    <a-option value="encrypt">加密</a-option>
                    <a-option value="decrypt">解密</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                    label="密码"
                    field="encryptPassword"
                    tooltip="解密时，如果传了配置文件，此项可忽略"
                >
                  <a-input
                      v-model="formData.encryptPassword"
                      placeholder="解密时，如果传了配置文件，此项可忽略"
                      allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                    label="新的密码"
                    field="newEncryptPassword"
                    tooltip="需要修改时请传入"
                >
                  <a-input
                      v-model="formData.newEncryptPassword"
                      placeholder="需要修改时请传入"
                      allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  field="file"
                  label="上传配置文件"
                  validate-trigger="input"
                  tooltip="以臻识相机为例，例如上传从相机导出的 configbackup0*.cfg 配置文件"
                >
                  <a-upload
                    action="/"
                    :auto-upload="false"
                    :show-file-list="false"
                    @change="fileChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-button type="primary" status="success" size="large" @click="handleEncryptOrDecrypt">执行</a-button>
              </a-col>
            </a-row>
          </a-card>
        </a-space>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Notification } from '@arco-design/web-vue';
  import { encryptOrDecrypt } from '@/api/park';

  const visible = ref(false);
  const fileList = ref([]);

  const formRef = ref();
  const emit = defineEmits(['fetchData', 'fetch-data']);
  const formData = ref({
    id: '',
    action : '',
    configFile: '',
    encryptPassword: '',
    encryptType: '',
    newEncryptPassword: '',
  });

  const handleClick = (id: any) => {
    formData.value.id = id;
    visible.value = true;
  };
  const resetFields = () => {
    formRef.value.resetFields();
  };
  const fileChange = (_fileList: any) => {
    fileList.value = _fileList;
  };
  const handleEncryptOrDecrypt = async () => {
    const uploadFormData = new FormData();
    uploadFormData.append('id', formData.value.id);
    uploadFormData.append('action', formData.value.action);
    uploadFormData.append('encryptPassword', formData.value.encryptPassword);
    uploadFormData.append('encryptType', formData.value.action=='encrypt' ? '1' : '0');
    uploadFormData.append('newEncryptPassword', formData.value.newEncryptPassword);

    if(fileList.value.length>=1){
      console.log('configFile', fileList.value[0].file);
      uploadFormData.append('configFile', fileList.value[0].file);
    }
    const { code, message, mixMessage } = await encryptOrDecrypt(uploadFormData);
    if (code === 10002) {
      Notification.success({
        title: message,
        content: mixMessage,
        duration: 10000,
        closable: true

      })
    }
  };

  defineExpose({ handleClick });
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 40px 20px;
    overflow: hidden;
  }

  .actions {
    height: 60px;
    padding: 14px 20px 14px 0;
    background: var(--color-bg-2);
    text-align: right;
  }
</style>
